<template>
  <div class="question-container">
    <!-- 头部 -->
    <el-card>
      <el-row class="top">
        <span style="font-size: 12px; color: pink">
          说明：目前支持学科和关键字条件筛选
        </span>
        <el-button
          class="filter-item fr"
          size="small"
          style="margin-left: 10px"
          type="success"
          icon="el-icon-edit"
          @click="add"
          >新增试题</el-button
        >
      </el-row>
      <el-form label-width="80px" size="small" ref="form" :model="form">
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select
                placeholder="请选择"
                class="input"
                v-model="form.subjectID"
                @change="getsubject"
              >
                <el-option
                  v-for="item in subjects"
                  :key="item.value"
                  :label="item.subjectName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select
                placeholder="请选择"
                class="input"
                v-model="form.catalogID"
                @focus="getdirectorys"
              >
                <el-option
                  v-for="(item, index) in directorys"
                  :key="index"
                  :lable="item.directoryName"
                  :value="item.directoryName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select
                placeholder="请选择"
                class="input"
                v-model="form.tags"
                @focus="gettags"
              >
                <el-option
                  v-for="(item, index) in tagname"
                  :key="index"
                  :lable="item.tagName"
                  :value="item.tagName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input
                placeholder="根据题干搜索"
                class="input"
                v-model="form.keyword"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select
                placeholder="请选择"
                class="input"
                v-model="form.questionType"
              >
                <el-option
                  v-for="(item, index) in questionType"
                  :key="index"
                  :label="item.label"
                  :value="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select
                placeholder="请选择"
                class="input"
                v-model="form.difficulty"
              >
                <el-option
                  v-for="(item, index) in difficulty"
                  :key="index"
                  :label="item.label"
                  :value="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select
                placeholder="请选择"
                class="input"
                v-model="form.direction"
              >
                <el-option
                  v-for="item in direction"
                  :key="item"
                  :label="item"
                  value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select
                placeholder="请选择"
                class="input"
                v-model="form.creator"
                @focus="getuser"
              >
                <el-option
                  v-for="(item, index) in username"
                  :key="index"
                  :label="item.username"
                  :value="item.username"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col> </el-row
        ><el-row>
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input class="input" v-model="form.remarks"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input class="input" v-model="form.enterpriseID"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <el-select
                v-model="form.province"
                placeholder="请选择"
                style="width: 48%; margin-right: 2%"
              >
                <el-option
                  v-for="obj in provinces"
                  :key="obj"
                  :label="obj"
                  :value="obj"
                ></el-option>
              </el-select>
              <el-select
                placeholder="请选择"
                style="width: 50%"
                v-model="form.city"
              >
                <el-option
                  v-for="obj in citys"
                  :key="obj"
                  :label="obj"
                  :value="obj"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="button">
            <el-button size="small" @click="checkall">清除</el-button>
            <el-button size="small" type="primary" @click="list"
              >搜索</el-button
            >
          </el-col>
        </el-row>
      </el-form>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="all"></el-tab-pane>
        <el-tab-pane label="待审核" name="0"></el-tab-pane>
        <el-tab-pane label="已审核" name="1"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
      </el-tabs>
      <el-alert
        :title="`数据一共 ${total} 条`"
        type="info"
        show-icon
        :closable="false"
      />
    </el-card>
    <!-- 表格和分页 -->
    <el-card>
      <el-table :data="getlist" style="width: 100%">
        <el-table-column label="试题编号" prop="number" width="120px">
        </el-table-column>
        <el-table-column label="学科" prop="subject" width="120px">
        </el-table-column>
        <el-table-column label="目录" prop="catalog" width="120px">
        </el-table-column>
        <el-table-column label="题型" prop="questionType" width="120px">
          <template v-slot="{ row }">
            <span v-if="row.questionType === '1'">单选</span>
            <span v-else-if="row.questionType === '2'">多选</span>
            <span v-else>简答</span>
          </template>
        </el-table-column>
        <el-table-column label="题干" prop="question" width="280px">
          <template v-slot="{ row }">
            <span v-html="row.question"></span>
          </template>
        </el-table-column>
        <el-table-column
          label="录入时间"
          prop="addDate"
          :formatter="formatTime"
          width="180px"
        >
        </el-table-column>
        <el-table-column label="难度" prop="difficulty" width="80px">
          <template v-slot="{ row }">
            <span v-if="row.difficulty === '1'">简单</span>
            <span v-else-if="row.difficulty === '2'">一般</span>
            <span v-else>困难</span>
          </template>
        </el-table-column>
        <el-table-column label="录入人" prop="creator" width="100px">
        </el-table-column>
        <el-table-column label="审核状态" prop="chkState" width="120px">
          <template v-slot="{ row }">
            <span v-if="row.chkState === 1">已审核</span>
            <span v-else-if="row.chkState === 2">已拒绝</span>
            <span v-else>待审核</span>
          </template>
        </el-table-column>
        <el-table-column label="审核意见" prop="chkRemarks" width="150px">
        </el-table-column>
        <el-table-column label="审核人" prop="chkUser" width="120px">
        </el-table-column>
        <el-table-column label="发布状态" prop="publishState" width="150px">
          <template v-slot="{ row }">
            <span v-if="row.publishState === 1">已发布</span>
            <span v-else-if="row.publishState === 0">已下架</span>
            <span v-else>待发布</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200px" fixed="right">
          <template v-slot="{ row }">
            <el-button type="text" size="small" @click="showpreview(row.id)"
              >预览</el-button
            >
            <el-button
              type="text"
              size="small"
              :disabled="row.chkState === 1"
              @click="choiced(row)"
              >审核</el-button
            >
            <el-button
              type="text"
              size="small"
              :disabled="row.publishState === 1"
              @click="addid(row.id)"
              >修改</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="changepublishState(row)"
              >{{ row.publishState === 1 ? '下架' : '上架' }}</el-button
            >
            <el-button
              type="text"
              size="small"
              :disabled="row.publishState === 1"
              @click="delchoice(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="end" style="margin-top: 20px">
        <el-pagination
          background
          @current-change="changePage"
          :current-page="form.page"
          :page-size="form.pagesize"
          :page-sizes="[5, 10, 20, 50]"
          layout=" prev, pager, next, sizes, jumper"
          :total="total"
        >
          >
        </el-pagination>
      </el-row>
    </el-card>
    <!-- 审核组件 -->
    <check :show-dialog.sync="showDialog" :choicelist="choicelist"></check>
    <!-- 预览组件 -->
    <preview
      :showpreviewDialog.sync="showpreviewDialog"
      :preview="previews"
      :answer="answer"
    ></preview>
  </div>
</template>

<script>
// 试题预览组件
import preview from '@/module-hmmm/components/questions-preview2'
// 审核组件
import check from '@/module-hmmm/components/questions-check'
import { list } from '@/api/base/users'
import { citys, provinces } from '@/api/hmmm/citys'
import { difficulty, direction, questionType } from '@/api/hmmm/constants'
import {
  delchoice,
  getchoice,
  getsubject,
  changepublish,
  tags,
  directorys,
  getQuestionsInfo
} from '@/api/hmmm/questions'
import { parseTime, html2Text } from '@/utils/index'
export default {
  name: 'Choice',
  data () {
    return {
      showDialog: false,
      showpreviewDialog: false,
      // 传给子组件的数据
      choicelist: {},
      // 筛选标签页
      activeName: 'all',
      difficulty,
      questionType,
      direction,
      // page: {
      //   // 放置页码及相关数据
      //   page: 1,
      //   pagesize: 5
      // },
      // 学科列表
      subjects: [],
      // 录入人
      username: [],
      // 标签列表
      tagname: [],
      // 目录列表
      directorys: [],
      total: null,
      // 表单信息
      getlist: [],
      form: {
        page: 1, // 否1当前页数
        pagesize: 5, // 每页显示多少  /** */
        subjectID: null, // 学科
        difficulty: null, // 难度
        questionType: null, // 试题类型
        tags: null, // 标签名称
        province: null, // 企业所在地省份
        city: null, // 企业所在城市
        keyword: null, // 关键字
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        direction: null, // 方向
        creatorID: null, // 录入人
        catalogID: null, // 目录
        chkState: null // 审核状态
      },
      // 查询信息
      value: '',
      // 城市
      provinces: provinces(),
      // 地区
      citys: null,
      // 预览
      previews: {},
      answer: null
    }
  },
  components: {
    check,
    preview
  },
  async created () {
    this.list()
    const { data } = await getsubject({
      page: 1,
      pagesize: 100
    })
    this.subjects = data.items
  },
  watch: {
    form: {
      handler (newval, oldval) {
        const data = newval.province === null ? null : newval.province
        this.citys = citys(data)
      },
      deep: true
    }
  },
  methods: {
    handleClick () {
      switch (this.activeName) {
        case 'all':
          this.form.chkState = null // 全部状态
          this.list()
          break
        case '0':
          this.form.chkState = 0 // 待审核
          this.list()
          break
        case '1':
          this.form.chkState = 1 // 通过
          this.list()
          break
        case '2':
          this.form.chkState = 2 // 不通过
          this.list()
          break
      }
    },
    // 获取学科列表
    async getsubject () {
      this.form.catalogID = ''
    },
    // 获取录入人
    async getuser () {
      const { data } = await list()
      this.username = data.list
    },
    // 获取目录列表
    async getdirectorys () {
      if (this.form.subjectID) {
        const { data } = await directorys({
          subjectID: this.form.subjectID
        })
        this.directorys = data.items
      }
    },
    // 获取标签列表
    async gettags () {
      const { data } = await tags()
      this.tagname = data.items
    },
    // 新增
    async add () {
      this.$router.push('new')
    },
    // 获取精选数据
    async list () {
      const { data } = await getchoice(this.form)
      this.total = data.counts
      this.getlist = data.items
    },
    formatTime (row, column, cellValue, index) {
      return parseTime(cellValue)
    },
    // 切换页码是触发
    changePage (newPage) {
      this.form.page = newPage
      this.list()
    },
    // 修改数据
    async addid (val) {
      this.$router.push({
        name: 'questions-new',
        params: {
          id: val
        }
      })
    },
    // 删除数据
    async delchoice (id) {
      try {
        await this.$confirm('确定要删除改数据吗')
        await delchoice(id)
        const { data } = await getchoice(this.form)
        if (data.items.length === 0 && this.form.page > 1) {
          console.log(data.items.length)
          this.form.page--
          this.list()
        } else {
          this.list()
        }
        this.list()
        this.$message.success('删除成功')
      } catch (error) {
        // 删除失败
      }
    },
    // 删除所有内容
    async checkall () {
      this.form = {
        subjectID: null, // 学科
        difficulty: null, // 难度
        questionType: null, // 试题类型
        tags: null, // 标签名称
        province: null, // 企业所在地省份
        city: null, // 企业所在城市
        keyword: null, // 关键字
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        direction: null, // 方向
        creatorID: null, // 录入人
        catalogID: null, // 目录
        chkState: null // 审核状态
      }
    },
    // 修改上架下架
    async changepublishState (val) {
      try {
        await this.$confirm('确定要改变状态吗')
        await changepublish(val)
        console.log(val)
        val.publishState = val.publishState === 0 ? 1 : 0
        this.$message.success('修改成功')
      } catch (error) {
        this.$message.error(error)
      }
    },
    // 审核
    async choiced (val) {
      this.showDialog = true
      this.choicelist = val
    },
    // 预览
    async showpreview (val) {
      try {
        const { data } = await getQuestionsInfo(val)
        this.previews = data
        this.answer = html2Text(this.previews.answer)
        console.log(data)
        this.showpreviewDialog = true
      } catch (error) {
        console.log(error)
        this.$message.error(error)
      }
    }
  }
}
</script>

<style scoped >
.question-container {
  margin: 10px 0px;
  padding: 0 10px;
}
.question-container .top {
  margin-bottom: 15px;
  display: block;
}
.question-container .input {
  width: 100%;
}
.question-container .button {
  display: flex;
  justify-content: flex-end;
}
</style>